<template>
	<view :data-theme="theme">
		<form @submit="formSubmit" report-submit='true'>
			<view class='addAddress'>
				<view class='list borRadius14'>
					<view class='item acea-row row-between-wrapper' style="border: none;">
						<view class='name'>收款户名：</view>
						<input type='text' placeholder='请输入真实姓名' placeholder-style="color:#ccc;" name='realName'
							:value="info.realName" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>身份证号：</view>
						<input placeholder='请输入真实身份证号' placeholder-style="color:#ccc;" name='idcard'
							:value="info.idcard" placeholder-class='placeholder' maxlength="18"></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>银行卡号：</view>
						<input type='number' placeholder='请输入银行卡号' placeholder-style="color:#ccc;" name='account'
							:value="info.account" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>银行开户行：</view>
						<input type='text' placeholder='请输入银行卡开户行' placeholder-style="color:#ccc;" name='bankName'
							:value="info.bankName" placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>手机号码：</view>
						<input type='number' placeholder='请输入手机号码' placeholder-style="color:#ccc;" name='mobile'
							:value="info.mobile" placeholder-class='placeholder' maxlength="11"></input>
					</view>
				</view>
				<view class="add-tips">
					<view class="add-tips-text1">温馨提醒：</view>
					<view class="add-tips-text2">1、一个身份只能绑定一次，请勿重复绑定，否则将会添加失败，或提现时被拒绝提现；</view>
					<view class="add-tips-text2">2、请真正核对信息，确保提交的个人信息与银行信息匹配一致，以免影响您的正常提现</view>
				</view>

				<button class='keepBnt bg_color' form-type="submit">立即保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		addUserBank,
		findUserBanks,
	} from '@/api/user.js';
	import {
		getCityList
	} from "@/utils";
	import {
		getCity
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		Debounce
	} from '@/utils/validate.js'
	let app = getApp();
	export default {
		components: {
		},
		data() {
			return {
				theme: app.globalData.theme,
				info: {}
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			if (this.isLogin) {
				if (options.index !== undefined) {
					this.getList(options.index);
				}
			} else {
				toLogin();
			}
		},
		methods: {
			async getList(index) {
				let res = res = await findUserBanks()
				this.info = (res.data || [])[index] || {}
			},
			
			/**
			 * 提交用户添加地址
			 * 
			 */
			formSubmit: Debounce(function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.realName) return that.$util.Tips({
					title: '请填写真实姓名'
				});
				if (!value.mobile) return that.$util.Tips({
					title: '请填写联系电话'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.mobile)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!value.idcard) return that.$util.Tips({
					title: '请填写身份证'
				});
				if (!value.bankName) return that.$util.Tips({
					title: '请填写银行开户行'
				});
				if (!value.account) return that.$util.Tips({
					title: '请填写银行卡号'
				});
				if (that.info.id) {
					value.id = that.info.id
				}
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				addUserBank(value).then(res => {
					if (value.id)
						that.$util.Tips({
							title: '修改成功',
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: '添加成功',
							icon: 'success'
						});
					setTimeout(function() {
						// #ifdef H5
						return history.back();
						// #endif
						// #ifndef H5
						return uni.navigateBack({
							delta: 1,
						})
						// #endif
					}, 1000);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			}),
		}
	}
</script>

<style scoped lang="scss">
	.add-tips{
		padding: 30rpx;
	}
	.add-tips-text1{
		font-size: 24rpx;
		color: #333333;
		line-height: 45rpx;
	}
	.add-tips-text2{
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
	}
	.bg-fixed{
		width: 100%;
		height: 750rpx;
		position: absolute;
		top: 0;
	}
	.addAddress {
		padding: 30rpx;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.addAddress .list {
		background-color: #fff;
		padding: 0 24rpx;
	}

	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		height: 90rpx;
		display: flex;
		align-content: center;
		line-height: 90rpx;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		flex-shrink: 0;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		flex: 1;
		margin-left: 50rpx;
	}

	.addAddress .list .item input {
		flex: 1;
		font-size: 30rpx;
		font-weight: 400;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 80rpx auto 24rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		// color: #E93323 ;
		@include main_color(theme);
		@include coupons_border_color(theme);
	}

	.font_color {
		@include main_color(theme);
	}

	.relative {
		position: relative;
	}

	.icon-dizhi {
		font-size: 44rpx;
		z-index: 100;
	}

	.abs_right {
		position: absolute;
		right: 0;
	}

	/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		@include main_bg_color(theme);
		@include coupons_border_color(theme);
		color: #fff !important
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		@include main_bg_color(theme);
		@include coupons_border_color(theme);
		color: #fff !important;
		margin-right: 0 !important;
	}
</style>
